import Vue from 'vue'

//配置vuex
//1、导入
import Vuex from 'vuex'
//2、注册
Vue.use(Vuex)

import Axios from "axios"
//将Axios挂到vue原形链上,全局注册，使用方法为:this.$axios
Vue.prototype.$ajax = Axios
// Axios.defaults.baseURL = 'http://vue.studyit.io';
// Axios.defaults.baseURL = '/api'
// Axios.defaults.headers.post['Content-Type'] = 'application/json';

// Vue.prototype.HOST = "/api"

// import qs from "qs"
// //全局注册，使用方法为:this.qs
// Vue.prototype.qs = qs

//1.1 导入路由的包
import VueRouter from 'vue-router'
//1.2 安装路由
Vue.use(VueRouter)

//导入格式化时间的插件
import moment from 'moment'

//定义全局过滤器
Vue.filter('dateFormat',function(dataStr,pattern="YYYY-MM-DD HH:mm:ss") {
    return moment(dataStr).format(pattern)
})

//2.1 导入vue-resource
import VueResource from 'vue-resource'
//2.2 安装vue-resource
Vue.use(VueResource)

// 导入所有Mint UI
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

// 导入MUI的样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

//1.3 导入自己的 router.js 模块
import router from './router.js'

import app from './App.vue'

var car = JSON.parse(localStorage.getItem('car') || '[]')

//3. new Vuex.Store()实例，得到一个数据仓储对象
var store = new Vuex.Store({
    state:{
        //存放数据，类比于data
        //在组件中访问store中的数据：this.$store.state.***
        car: car //将购物车中的商品数据，用一个数组存储起来 {id:商品的id，count:购买的数量，price:商品的单价，selected:false}
    },
    mutations:{
        //如果要操作store中的state值，只能调用mutations提供的方法进行操作
        //组件调用mutations中的方法：this.$store.commit('方法名')
        addToCar(state,goodsinfo){
            var flag = false
            state.car.some(item => {
                if(item.id == goodsinfo.id){
                    item.count += parseInt(goodsinfo.count)
                    flag = true
                    return true
                }
            })
            if(!flag){
                state.car.push(goodsinfo)
            }
            //当更新页面后，把car数组存储到本地的localStoreage中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updataGoodsInfo(state,goodsinfo){
            //修改购物车中商品的数量值
            state.car.some(item => {
                if(item.id == goodsinfo.id){
                    item.count = parseInt(goodsinfo.count)
                    return true
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        removeFormCar(state,id){
            //根据id从store中的购物车中删除对应的那条商品数据
            state.car.some((item,i) => {
                if(item.id == id){
                    state.car.splice(i,1)
                    return true
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateGoodsSelected(state,info){
            state.car.some(item => {
                if(item.id == info.id){
                    item.selected = info.selected
                    // return true
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        }
    },
    getters:{
        //将数据进行包装，使用方法：this.$store.getters.***
        //相当于计算属性，也相当于filters
        getAllCount(state){
            var c = 0;
            state.car.forEach(item => {
                c += item.count
            })
            return c
        },
        getGoodsCount(state){
            var o = {};
            state.car.forEach(item => {
                o[item.id] = item.count
            })
            return o
        },
        getGoodsSelected(state){
            var o = {};
            state.car.forEach(item => {
                o[item.id] = item.selected
            })
            return o
        },
        getGoodsCountAndAmount(state){
            var o = {
                count: 0, //勾选的数量
                amount: 0 //勾选的总价
            }
            state.car.forEach(item => {
                if (item.selected) {
                    o.count += item.count;
                    o.amount += item.price * item.count;
                }
            })
            return o
        }
    }
})

var vm = new Vue({
    el: '#app',
    render: c => c(app),
    router, //1.4 挂载路由对象到VM实例
    store //4.将store挂载到vm实例上
})